<!DOCTYPE html>
<html lang="zh-CN">
    <head>
		<title>手写板</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--标准的视口设置-->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS integrity:防止CDN篡改Javascript; crossorigin:告诉浏览器执行href的而不发送用户凭证;-->
        <link rel="stylesheet" href="external/bootstrap.min.css">
        <style type="text/css">
            .canvas {
                background-color: blanchedalmond;
                margin:0px 0px 0px 0px;
                border:0px;
                padding:0px 0px 0px 0px;
                width: 100%;
                height: 570px;
            }
            .container-fluid {
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid" id="app">
            <div style="display:flex;flex-direction:row; align-items:center;padding-top:30px;">
                <div style="padding-left:10px;">
                    <img src="icon/refresh.png" width=50 height=50 alt="null" onclick="refreshall()">
                </div>
                <div id = "title" style="display:table; margin: 0 auto;font-size:40px;">
                    签名版
                </div>
                <div>
                    <img src="icon/delete.png" width=50 height=50 alt="null" onclick="clearcanvas()">
                </div>
            </div>
            <div>
                <canvas class="canvas" id="canvas"></canvas>
            </div>
            <div style="display:table; margin: 0 auto;">
                <button class="btn btn-success" style="width:200px;height:50px;" onclick="savecanvas()">确定</button>
            </div>
        </div>
        <div class="clearfix"></div>

        <script src="external/jquery.slim.min.js"></script>
        <script src="external/popper.min.js"></script>
        <script src="external/bootstrap.min.js"></script>
        <script>
            var localurl = decodeURIComponent(location.search);
            var writeplace = localurl.slice(7);
            document.getElementById("title").innerHTML = writeplace;
            var host = window.location.host;
            //Connect();
            var socket;
            function Connect(){
                try{
                    socket = new WebSocket('ws://' + host + ':33662/webWrite');
                }catch(e){
                    alert('error new WebSocket');
                    return;
                }
                socket.onopen = sOpen;
                socket.onerror = sError;
                socket.onmessage = sMessage;
                socket.onclose = sClose;
            }
            function sOpen(){
                var msgbody = '服务器连接成功';
                // console.log(msgbody);
                // alert(msgbody);
            }
            function sError(){
                // var msgbody = '服务器异常Error=' + e + '请检查';
                // console.log(msgbody);
                // alert(msgbody);
            }
            function sMessage(msg){
                // alert('server says:' + msg.data);
                //由JSON字符串转换为JSON对象
                var data = JSON.parse(msg.data);
                parseMessageJson(data);
            }
            function sClose(e){
                var msgbody = '服务器连接关闭ErrorCode=' + e.code;
                console.log(msgbody);
            }
            function sSend(msg){
                socket.send(msg);
            }
            function parseMessageJson(msg){
                var szcmd = msg['cmd'];
                if("pushwriteinfo" == szcmd){
                    ctx.strokeStyle = msg['brushColor'];
                    ctx.fillStyle = msg['brushColor'];
                }
            }
            function refreshall(){
                window.location.reload();
            }
            //get canvas
            var canvas = document.getElementById("canvas");
            //full screen
            // canvas.width = window.innerWidth;
            // canvas.height = window.innerHeight-50;

            //判断是否支持触摸
            var touchable = 'createTouch' in document;
            if (touchable) {
                canvas.addEventListener('touchstart', onTouchStart, false);
                canvas.addEventListener('touchmove', onTouchMove, false);
            } else {
                alert("touchable is false!");
            }
            //上一次触摸坐标
            var lastX;
            var lastY;
            var ctx = canvas.getContext("2d");

            var ratioX = canvas.width / window.innerWidth;
            var ratioY = (canvas.height) / window.innerHeight;
            ctx.lineWidth = 6;	//画笔粗细
            ctx.strokeStyle = '#DA70D6';//画笔颜色
            //触摸开始事件
            function onTouchStart(event) {
                event.preventDefault(); //阻止滚动
                lastX = event.touches[0].clientX * ratioX;
                lastY = event.touches[0].clientY * ratioY;
                console.log(canvas.width+":"+window.innerWidth+"&"+canvas.height+":"+window.innerHeight);
                drawRound(lastX,lastY);
            }
            //触摸滑动事件
            function onTouchMove(event) {
                try {
                event.preventDefault();
                drawLine(lastX,lastY,event.touches[0].clientX * ratioX,event.touches[0].clientY * ratioY);
                lastX=event.touches[0].clientX * ratioX;
                lastY=event.touches[0].clientY * ratioY;
                } catch(err) {
                    alert(err.description);
                }
            }
            //画圆
            function drawRound(x,y)
            {
                // ctx.fillStyle = '#DA70D6';
                ctx.beginPath();
                ctx.arc(x,y,3,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fill();
            }
            //画线
            function drawLine(startX,startY,endX,endY)
            {
                ctx.beginPath(); //开始一条路径，或重置当前的路径
                ctx.lineCap = "round";
                ctx.moveTo(startX,startY);
                ctx.lineTo(endX,endY);
                ctx.stroke(); //进行绘制
            }
            //清除
            function clearcanvas()
            {
                ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
            }
            //确定
            function savecanvas()
            {
                var data = canvas.toDataURL("image/png");
                var emitdata = {};
                emitdata['cmd'] = 'uphandwritePic';
                emitdata['name'] = writeplace;
                emitdata['data'] = data;
                var json = JSON.stringify(emitdata);
                sSend(json);
                clearcanvas();
                window.location.href="handwritesuc.html";
            }
        </script>
    </body>
</html>